<template>
	<view>
		<view class="c-wrap">
			<u-form ref="uForm" label-width="auto">
				<u-form-item label="头像">
					<u-avatar @tap="avatarChange" mode="square" slot="right" :src="userInfo.avatar" size="100"></u-avatar>
				</u-form-item>
				<u-form-item label="昵称" right-icon="arrow-right">
					<u-input @click="jump(userInfo.username,'username')" :placeholder="userInfo.username" :disabled="true" input-align="right" />
				</u-form-item>
				<u-form-item label="个性签名" right-icon="arrow-right">
					<u-input @click="jump(userInfo.intro,'intro')" :placeholder="userInfo.intro" :disabled="true" input-align="right" />
				</u-form-item>
				<u-form-item label="标签" label-position="top" :border-bottom="false">
					<view @click="jump(userInfo.tag_str,'tag_str')" class="tag-box">
						<view class="tag" v-if="!userInfo.tag_str">+点击添加标签</view>
						<view v-for="(item,index) in userInfo.tag_str" :key="index" class="tag">{{item}}</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {

				},
				userInfo: {},
			};
		},
		onShow(options) {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				this.$H.get("user/userInfo").then(res => {
					this.userInfo = res.result
				})
			},
			jump(value, type) {
				uni.navigateTo({
					url: "edit-submit?value=" + JSON.stringify(value) + "&type=" + type
				})
			},
			avatarChange() {
				uni.showModal({
					content: '是否修改头像',
					success: res => {
						if (res.confirm) {
							uni.chooseImage({
								count: 1, //最多可以选择的图片总数
								sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
								success: res => {
									// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
									var tempFilePaths = res.tempFilePaths;
									//启动上传等待中...
									uni.showLoading({
										title:'正在上传...'
									})

									uni.uploadFile({
										url: this.$c.domain + 'common/upload2',
										filePath: tempFilePaths[0],
										name: 'Image',
										formData: {},
										header: {
											token: uni.getStorageSync("token")
										},
										success: res=> {
											var data = JSON.parse(res.data);
											//服务器返回格式: { "Catalog": "testFolder", "FileName": "1.jpg", "Url": "https://test.com/1.jpg" }
											this.userInfo.avatar=data.result.url;
											uni.hideLoading()
										},
										fail: res=> {
											uni.hideLoading()
											uni.showModal({
												title: '错误提示',
												content: '上传图片失败',
												showCancel: false,
												success: res=> {}
											})
										}
									});
								}
							});
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style scoped>
	.c-wrap {
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.bind-mobile {
		display: flex;
	}

	/* 标签 */
	.tag-box {}

	.tag-box .tag {
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		background-color: #ffebe5;
	}

	.tag-box .tag:nth-child(2n) {
		background-color: #ecf9f2;
	}

	.tag-box .tag:nth-child(3n) {
		background-color: #fff7e5;
	}

	.tag-box .tag:nth-child(5n) {
		background-color: #b3e0ff;
	}
</style>
